import React, { useEffect, useRef, useState } from 'react';
import { Space, Table, Popconfirm, Form, Input, Select, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { PaginationProps } from 'antd/es/pagination';
import LeftSelect from './components/LeftSelect';
import './List.less';

export default function DictionaryList() {
  const defaultInitialValues = { status: '' };
  const [columns, setColumns] = useState<any>([]);
  const [initialValues, setInitialValues] = useState<any>({
    ...defaultInitialValues,
  });
  const [form] = Form.useForm();
  useEffect(() => {
    form.resetFields();
  }, [initialValues]);
  const handleSelect = (data: any) => {
    console.log('接收到子组件传参', data);
    const { keyData } = data;
    const initialResult: any = {};
    const resultData = keyData.map((item: any) => {
      initialResult[item.key] = '';
      return {
        title: item.name,
        dataIndex: item.key,
      };
    });
    setColumns(resultData);
    setInitialValues({ ...initialResult, ...defaultInitialValues });
  };
  const onReset = () => {
    console.log('请求后端数据，后端的数据为', initialValues);
  };

  const defaultColumns = [
    {
      title: '是否平台预置',
      dataIndex: 'type',
      render: (_) => <>{_ === 0 ? '否' : '是'}</>,
    },
    {
      title: '用户状态',
      dataIndex: 'status',
      render: (_) => <>{_ === 0 ? '禁用' : '启用'}</>,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>修改</a>
          <a>停用</a>
        </Space>
      ),
    },
  ];

  const selectOptions = [
    { value: '', label: '全部' },
    { value: 0, label: '禁用' },
    { value: 1, label: '启用' },
  ];

  const data = [
    { test: '234', name: '人员', type: 1, status: 0, id: 1 },
    { test: '234', name: '人员', type: 0, status: 1, id: 2 },
    { test: '234', name: '人员', type: 0, status: 1, id: 3 },
    { test: '234', name: '人员', type: 1, status: 0, id: 4 },
  ];
  const pageConfig = useRef<PaginationProps>({
    defaultCurrent: 1,
    defaultPageSize: 5,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 20],
    showQuickJumper: true,
    showTotal(total, range) {
      return `第${range[0]}-${range[1]}条 一共${total}条`;
    },
  });
  const onFinish = (data: any) => {
    console.log(data);
  };
  return (
    <div className="dictionary-list-wrapper">
      <div className="left-select-main">
        <LeftSelect handleSelect={handleSelect} />
      </div>
      <div className="my-content-wrapper">
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          layout="inline"
          initialValues={initialValues}
          onFinish={onFinish}
          autoComplete="off"
          onReset={onReset}
          className="my-form-wrapper"
          form={form}
        >
          {columns.map((item: any) => {
            return (
              <Form.Item
                label={item.title}
                name={item.dataIndex}
                key={item.dataIndex}
              >
                <Input />
              </Form.Item>
            );
          })}
          <Form.Item label="状态" name="status">
            <Select options={selectOptions} />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button type="default" htmlType="reset">
              重置
            </Button>
          </Form.Item>
        </Form>
        <Button type="primary">新增</Button>
        <Table
          columns={[...columns, ...defaultColumns]}
          dataSource={data}
          rowKey="id"
          pagination={{
            ...pageConfig.current,
            pageSize: 10,
            total: 100,
            current: 1,
          }}
        />
      </div>
    </div>
  );
}
